<%--
  Created by IntelliJ IDEA.
  User: xiaomi
  Date: 2025/2/7
  Time: 9:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>首页</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <style>
        table {
            border-collapse: collapse;
            width: 80%;
            margin: 20px auto;
        }

        table, th, td {
            border: 1px solid rgb(165, 184, 213);
        }

        th, td {
            text-align: center;
            padding: 8px;
        }

        th {
            background: rgb(165, 184, 213);
            color: white;
        }

        button {
            padding: 5px 10px;
            margin: 5px;
            border: none;
            border-radius: 3px;
            background-color: rgb(165, 184, 213);
            color: white;
            cursor: pointer;
            font-size: 14px;
        }

        button:hover {
            background-color: rgb(125, 166, 217);
        }

        input[type="text"], select {
            padding: 5px;
            margin: 5px 0;
            border: 1px solid #ccc;
            border-radius: 3px;
            width: calc(100% - 12px);
            box-sizing: border-box;
        }

        input[type="checkbox"] {
            margin-right: 5px;
        }

        .modal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 20px;
            border: 1px solid #ccc;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 300px;
            z-index: 1000;
        }

        .modal h3 {
            margin-top: 0;
        }

        .modal label {
            display: block;
            margin-bottom: 5px;
        }

        .modal .form-group {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .modal .form-group label {
            margin-right: 10px;
            width: 80px;
            text-align: right;
            white-space: nowrap;
        }

        .modal .form-group input[type="text"], .modal .form-group select {
            flex: 1;
        }

        .modal-buttons {
            text-align: right;
            margin-top: 10px;
        }

        .modal-buttons button {
            margin-left: 5px;
        }

        .checkbox-group {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 10px;
        }

        .checkbox-group label {
            margin-right: 10px;
            display: flex;
            align-items: center;
        }
        .checkbox-group label input {
            margin-right: 5px; /* 调整复选框和文本之间的间距 */
        }
    </style>
</head>
<body>
<button id="addButton">添加</button>
<table id="courseTable">
    <tr>
        <th>账号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>上班时间</th>
        <th>操作</th>
    </tr>
</table>

<div id="addModal" class="modal">
    <h3>添加私教</h3>
    <div class="form-group">
        <label for="username">账号:</label>
        <input type="text" id="username">
    </div>
    <div class="form-group">
        <label for="name">姓名:</label>
        <input type="text" id="name">
    </div>
    <div class="form-group">
        <label for="password">密码:</label>
        <input type="text" id="password">
    </div>
    <div class="form-group">
        <label for="addGender">性别:</label>
        <select id="addGender">
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
    </div>
    <div class="form-group">
        <label>上班时间:</label>
        <div class="checkbox-group">
            <label><input type="checkbox" value="周一"> 周一</label>
            <label><input type="checkbox" value="周二"> 周二</label>
            <label><input type="checkbox" value="周三"> 周三</label>
            <label><input type="checkbox" value="周四"> 周四</label>
            <label><input type="checkbox" value="周五"> 周五</label>
            <label><input type="checkbox" value="周六"> 周六</label>
            <label><input type="checkbox" value="周日"> 周日</label>
        </div>
    </div>
    <div class="modal-buttons">
        <button id="saveAddButton">确定</button>
        <button id="cancelAddButton">取消</button>
    </div>
</div>

<div id="editModal" class="modal">
    <h3>编辑上班时间</h3>
    <div class="checkbox-group">
        <label><input type="checkbox" value="周一"> 周一</label>
        <label><input type="checkbox" value="周二"> 周二</label>
        <label><input type="checkbox" value="周三"> 周三</label>
        <label><input type="checkbox" value="周四"> 周四</label>
        <label><input type="checkbox" value="周五"> 周五</label>
        <label><input type="checkbox" value="周六"> 周六</label>
        <label><input type="checkbox" value="周日"> 周日</label>
    </div>
    <div class="modal-buttons">
        <button id="saveButton">保存</button>
        <button id="cancelButton">取消</button>
    </div>
</div>
<script>
    $(document).ready(function () {
        var usertype = "私教";
        var url = './user/find/'+usertype;
        // 使用AJAX获取课程信息
        $('#addButton').click(function () {
            $('#addModal').show();
        });
        $('#cancelAddButton').click(function () {
            $('#addModal').hide();
        });
        $('#cancelButton').click(function () {
            $('#editModal').hide();
        });
        $('#saveAddButton').click(function () {
            var username = $('#username').val();
            var name = $('#name').val();
            var password = $('#password').val();
            var gender = $('#addGender').val();
            var intimeString = [];
            $('#addModal input[type="checkbox"]:checked').each(function () {
                intimeString.push($(this).val());
            });
            var intime = intimeString.join("、");
            var user = {
                username: username,
                name: name,
                password: password,
                gender: gender,
                usertype: usertype,
                intime: intime
            };
            console.log(user);
            $.ajax({
                url: './user/addTeacher',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(user),
                success: function () {
                    alert('添加成功');
                    $('#addModal').hide();
                    location.reload();
                },
                error: function () {
                    alert('添加失败');
                }
            })
        });
        $(document).on('click','.deleteButton',function () {
            var username = $(this).attr('data-course-id');
            var url = './user/delete/'+username;
            $.ajax({
                url: url,
                type: 'DELETE',
                success: function () {
                    alert('删除成功');
                    location.reload();
                },
                error: function () {
                    alert('删除失败');
                }
            });
        });

        $(document).on('click','.worktimeButton',function () {
            selectedCourseId = $(this).attr('data-course-id');
            $('#editModal').show();
            $('#editModal input[type="checkbox"]').prop('checked', false);
        });
        $('#saveButton').click(function () {
            var username = selectedCourseId;
            var intimeString = [];
            $('#editModal input[type="checkbox"]:checked').each(function () {
                intimeString.push($(this).val());
            });
            var intime = intimeString.join("、");
            console.log(username);
            console.log(intime);
            var user = {
                username: username,
                intime: intime
            };
            $.ajax({
                url: './user/updateintime',
                type: 'POST',
                data: JSON.stringify(user),
                contentType: 'application/json',
                success: function () {
                    alert('修改成功');
                    $('#editModal').hide();
                    location.reload();
                },
                error: function () {
                    alert('修改失败');
                }
            });
        })
        $.ajax({
            url: url,
            type: 'POST',
            dataType: 'json',
            success: function (data) {
                var table = $('#courseTable');
                data.forEach(function (course) {
                    var row = $('<tr></tr>');
                    row.append($('<td></td>').text(course.username));
                    row.append($('<td></td>').text(course.name));
                    row.append($('<td></td>').text(course.gender));
                    row.append($('<td></td>').append($('<button class="worktimeButton" , data-course-id="' + course.username + '"></button>').text(course.intime)));
                    row.append($('<td></td>').append($('<button class="deleteButton" , data-course-id="' + course.username + '">删除</button>')));
                    table.append(row);
                });
            },
            error: function () {
                alert('获取用户信息失败');
            }
        });

    });
</script>
</body>
</html>